<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    <script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
</head>
<body style="background-color: #f2f2f2; padding-top:15px; padding-left: 10px;">
<ul class="layui-timeline">
    <h1 class="layui-timeline-title">2021年</h1>
    <li class="layui-timeline-item" style="display: flex;">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text" style="width:60%;">
            <h3 class="layui-timeline-title">2月4日</h3>
            <p>
                前台主页已开发完成
                <br>嗯, 尽管页面很粗糙,但这是学习过程
                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
            </p>
        </div>
        <img src="/images/bg.jpg" style="width: 100px; height: 60px; transform: rotate(10deg);padding-top: 10px; padding-left:150px;">
    </li>


    <li class="layui-timeline-item" style="display: flex;">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text" style="width:60%;">
            <h3 class="layui-timeline-title">1月30日</h3>
            <p>
                SYSTEM 的前台主页已经进入开发
                <br>嗯, 尽管页面很粗糙,但这是学习过程
                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
            </p>
        </div>
        <img src="/images/bg.jpg" style="width: 100px; height: 60px; transform: rotate(10deg);padding-top: 10px; padding-left:150px;">
    </li>
    <li class="layui-timeline-item" style="display: flex;">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text" style="width:60%;">
            <h3 class="layui-timeline-title">1月29日</h3>
            <p>
                SYSTEM 的用户后台已经开发完成了
                <br>嗯, 尽管页面很粗糙,但这是学习过程
                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
            </p>
        </div>
        <img src="/images/bg.jpg" style="width: 100px; height: 60px; transform: rotate(10deg);padding-top: 10px; padding-left:150px;">
    </li>
    <li class="layui-timeline-item" style="display: flex;">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text" style="width:60%;">
            <h3 class="layui-timeline-title">1月28日</h3>
            <p>
                SYSTEM 的计划与2月10日开发完成并开始测试
                <br>嗯, 尽管页面很粗糙,但这是学习过程
                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
            </p>
        </div>
        <img src="/images/bg.jpg" style="width: 100px; height: 60px; transform: rotate(10deg);padding-top: 10px; padding-left:150px;">
    </li>
    <li class="layui-timeline-item" style="display: flex;">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text" style="width:60%;">
            <h3 class="layui-timeline-title">1月27日</h3>
            <p>
                SYSTEM 的后台已经进入正式开发
                <br>嗯, 尽管页面很粗糙,但这是学习过程
                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
            </p>
        </div>
        <img src="/images/bg.jpg" style="width: 100px; height: 60px; transform: rotate(10deg);padding-top: 10px; padding-left:150px;">
    </li>
    <li class="layui-timeline-item" style="display: flex;">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text" style="width:60%;">
        <h3 class="layui-timeline-title">1月1日</h3>
        <p>
            也许这是这辈子的最后的诗,不写了,百无一用是书生!!!!!
            <br>                -怅思-
            <br>月断思无涯, 怅风奏思哗. 闻奏哗声起, 常在忧恍里.
            <br>恍惚忧然间, 梦碎在残片. 今思今何在, 忽复梦中来.<i class="layui-icon"></i>
        </p>
    </div>
    <img src="/images/bg.jpg" style="width: 100px; height: 60px; transform: rotate(-10deg);padding-top: 30px; padding-left:150px;">
</li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">过去</div>
        </div>
    </li>
</ul>
</body>
</html>